import './Navbar.css';
import { Menu, X, Globe, Map, BookOpen, Settings, User, ChevronLeft, ChevronRight } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { useLocation, Link } from 'react-router-dom';

export interface NavItem {
  id: string;
  label: string;
  icon: React.ReactNode;
  path: string;
}

export interface NavbarProps {
  logo?: React.ReactNode;
  items: NavItem[];
  onItemClick?: (id: string) => void;
}

const NavbarFix: React.FC<NavbarProps> = ({
  logo,
  items,
  onItemClick
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [activeItem, setActiveItem] = useState<string | null>(null);
  const [showScrollLeft, setShowScrollLeft] = useState(false);
  const [showScrollRight, setShowScrollRight] = useState(false);
  const navRef = useRef<HTMLDivElement>(null);
  const location = useLocation();

  // 监听滚动位置以显示/隐藏滚动按钮
  useEffect(() => {
    const handleScroll = () => {
      if (!navRef.current) return;

      const { scrollLeft, scrollWidth, clientWidth } = navRef.current;
      setShowScrollLeft(scrollLeft > 10);
      setShowScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
    };

    const navElement = navRef.current;
    if (navElement) {
      navElement.addEventListener('scroll', handleScroll);
      // 初始检查
      handleScroll();
    }

    return () => {
      if (navElement) {
        navElement.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  // 根据当前URL设置活动项
  useEffect(() => {
    const currentPath = location.pathname;
    const activeNavItem = items.find(item => item.path === currentPath);
    if (activeNavItem) {
      setActiveItem(activeNavItem.id);
    }
  }, [location.pathname, items]);

  const scrollLeft = () => {
    if (navRef.current) {
      navRef.current.scrollBy({ left: -100, behavior: 'smooth' });
    }
  };

  const scrollRight = () => {
    if (navRef.current) {
      navRef.current.scrollBy({ left: 100, behavior: 'smooth' });
    }
  };

  const handleItemClick = (id: string, path: string) => {
    setActiveItem(id);
    if (onItemClick) {
      onItemClick(id);
    }
    setIsOpen(false);
  };

  // 计算滚动进度
  const getScrollProgress = () => {
    if (!navRef.current) return 0;
    const { scrollLeft, scrollWidth, clientWidth } = navRef.current;
    return scrollLeft / (scrollWidth - clientWidth);
  };

  return (
    <nav className="navbar bg-white border-b border-gray-200 shadow-sm fixed w-full top-0 z-500">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <div className="flex-shrink-0 flex items-center">
            {logo ? logo : (
              <span className="text-xl font-bold text-blue-600">多语言旅行助手</span>
            )}
          </div>

          {/* Desktop Navigation with Scroll Controls */}
          <div className="hidden md:flex items-center relative w-full mx-4">
            {/* Scroll Left Button */}
            <button
              className={`absolute left-0 top-1/2 transform -translate-y-1/2 z-10 bg-white/90 hover:bg-white shadow-md rounded-full p-1 text-gray-500 hover:text-blue-600 transition-all duration-200 ${showScrollLeft ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
              onClick={scrollLeft}
              aria-label="Scroll left"
            >
              <ChevronLeft size={20} />
            </button>

            {/* Navigation Items Container */}
            <div
              ref={navRef}
              className="md:flex space-x-6 w-full overflow-x-auto scrollbar-hide py-2 px-4"
              style={{ scrollBehavior: 'smooth' }}
            >
              {items.map((item) => (
                <Link
                  key={item.id}
                  to={item.path}
                  className={`flex items-center space-x-2 px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200 whitespace-nowrap ${activeItem === item.id ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-blue-500 hover:bg-gray-50'}`}
                  onClick={() => handleItemClick(item.id, item.path)}
                >
                  {item.icon}
                  <span>{item.label}</span>
                </Link>
              ))}
            </div>

            {/* Scroll Right Button */}
            <button
              className={`absolute right-0 top-1/2 transform -translate-y-1/2 z-10 bg-white/90 hover:bg-white shadow-md rounded-full p-1 text-gray-500 hover:text-blue-600 transition-all duration-200 ${showScrollRight ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
              onClick={scrollRight}
              aria-label="Scroll right"
            >
              <ChevronRight size={20} />
            </button>

            {/* Scroll Progress Indicator */}
            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-200">
              <div
                className="h-full bg-blue-500 transition-all duration-200"
                style={{ width: `${getScrollProgress() * 100}%` }}
              />
            </div>
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden flex items-center">
            <button
              type="button"
              className="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-blue-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
              onClick={() => setIsOpen(!isOpen)}
            >
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Navigation */}
      {isOpen && (
        <div className="md:hidden bg-white border-t border-gray-200">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {items.map((item) => (
              <Link
                key={item.id}
                to={item.path}
                className={`block flex items-center space-x-3 px-3 py-2 rounded-md text-base font-medium ${activeItem === item.id ? 'bg-blue-50 text-blue-600' : 'text-gray-600 hover:bg-gray-50 hover:text-blue-500'}`}
                onClick={() => handleItemClick(item.id, item.path)}
              >
                {item.icon}
                <span>{item.label}</span>
              </Link>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
};

export default NavbarFix;